Grunt

The JavaScript Task Runner

@jmhobbs

I make a website for dogs.

Pack

packlove.com / velvetcache.org / whatcheer.com

What is Grunt?

Automation.

Minification, compilation, unit testing, linting, etc.

So...

GNU Make CMake qmake SCons waf Rake Ant doit NMake JAM ...?

How is this different?

Node! Plugins! A Real Language! Street Cred!

Get It

npm install -g grunt-cli

ZOMG GLOBAL!

This does not install grunt.
It's a shim to load up the local grunt.

Get It (For Reals)

package.json

{
  "name": "grunt-demo",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.0"
  }
}

gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({});
};

DEMO

What is a task?

A Function

function my_default_task () {
	console.log('OH HAI!');
}

DEMO

Plugins!

Most of what you need has already been written.

Load Plugin

grunt.loadNpmTasks('grunt-contrib-uglify');

Register Plugin

grunt.registerTask('default', ['uglify']);

Configure Plugin

Remember that initConfig call?

grunt.initConfig({
  uglify: {
    options: {
      banner: '/*! grunt-demo */\n'
    },
    build: {
      src: 'some-file-you-wrote.js',
      dest: 'some-file-you-wrote.min.js'
    }
  }
});

DEMO

Multiple Tasks by Default

grunt.registerTask('default', ['jshint', 'uglify']);

DEMO

Writing A Really Useful Task

http://ermahgerd.jmillerdesign.com/

1. Steal the hard part.

http://ermahgerd.jmillerdesign.com/js/filters.js

2. Write the config.

		ermahgerd: {
			build: {
				src: 'intro.txt',
				dest: 'ermahgerd.txt'
			}
		}

3. Write the task.

	var ermahgerd = require('./ermahgerd.js');
	grunt.registerMultiTask('ermahgerd', 'Convert regular text to ERMAHGERD text.', function() {
		grunt.file.write(this.data.dest, ermahgerd.translate(grunt.file.read(this.data.src).toUpperCase()));
	});

DEMO

Moar Plugins!

http://gruntjs.com/plugins

fin